import React, { Component } from 'react'
import PropTypes from 'prop-types' // 引入类型检查的库
import {nanoid} from 'nanoid'
/*
  nanoid 这个库有分别导出一个 nanoid 函数  
    执行这个函数可以返回一个绝对不会重复的字符串 作为id来进行使用
*/ 
import './index.css'

export default class Index extends Component {

  /*
    react的类型检查需要在类中定义静态对象 propTypes 进行设置对应的键值对形式的类型检查
  */ 
  static propTypes = {
    addToDo:PropTypes.func.isRequired
  }

  handerKeyUp = (event)=>{
    const {target,keyCode} = event
    if(keyCode!==13){
      return
    }
    if(target.value.trim() === ''){
      alert('输入的内容不能为空')
      return
    }
    const todoObj = {id:nanoid(),name:target.value,done:false}
    // react子组件给父组件传值 通过的方式是父组件给子组件传递一个回调函数，子组件执行这个回调函数并传参，父组件就可以接收到这个参数
    this.props.addToDo(todoObj)
    target.value = ''
  }

  render() {
    return (
      <div className="headerContainer">
        <div className="searchBar">
          <input onKeyUp={this.handerKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
        </div>
      </div>
    )
  }
}
